<script lang="ts" setup>
import type { AssignPropEmits, QueryConditionProps } from '../types/QueryCondition';
import { ElTable } from 'element-plus-cisdi';
import { useI18n } from 'vue-i18n';
import Search from '@/assets/image/search.svg';
import { UseRoleDialog } from '../hooks/UseRoleDialog';
import style from '../index.module.scss';

const props = withDefaults(defineProps<QueryConditionProps>(), {
  title: '',
  schema: undefined,
});

const emits = defineEmits<AssignPropEmits>();

const { t } = useI18n();

const {
  tableRef,
  schema,
  initFormRef,
  pagination,
  handleDelete,
  closeDialog,
  dialogVisible,
  deleteUsers,
  openAddAssignUser,
  handleEnter,
  inputValue,
} = UseRoleDialog(props, emits);

defineExpose({
  inputValue,
});
</script>

<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" body-class="assign-users-dialog-body" class="role-assign-users-dialog" :z-index="1000" :title="title" destroy-on-close @close="closeDialog">
    <div :class="style['role-base-info']">
      <div :class="style['group-box']">
        <div :class="style['group-left']" />
        <div :class="style['group-name']">
          {{ t('roleManage.info') }}
        </div>
      </div>
      <MiSchemaField :ref="initFormRef" key="0" :schema="schema" style="display: block;" />
    </div>
    <div :class="style['bottom-box']">
      <div :class="style.basic">
        <div :class="style['group-box']">
          <div :class="style['group-left']" />
          <div :class="style['group-name']">
            {{ t('roleManage.assign.title2') }}
          </div>
        </div>
        <div :class="style['operate-btn']">
          <el-input
            v-model="inputValue" :suffix-icon="Search" :class="style['search-box']"
            :placeholder="t('roleManage.placeholder.input')" clearable @keyup.enter="handleEnter"
          />
          <el-button :class="style.delete" @click="deleteUsers">
            {{ t('roleManage.delete')
            }}
          </el-button>
          <el-button :class="style.add" @click="openAddAssignUser">
            {{ t('roleManage.add') }}
          </el-button>
        </div>
      </div>
      <ElTable ref="tableRef" style="width: 100%;height: calc(100% - 68px);" :data="tableData">
        <el-table-column type="selection" width="60" />
        <el-table-column type="index" :label="t('roleManage.userList.index')" width="100" />
        <el-table-column v-for="column in columnDialog" :key="column.prop" :show-overflow-tooltip="true" v-bind="column">
          <template #default="{ row }">
            <slot :name="`column-${column.prop}`" :row="row" :value="row[column.prop!]">
              {{ row[column.prop!] }}
            </slot>
          </template>
        </el-table-column>
        <el-table-column :label="t('roleManage.userList.operation')" width="100" fixed="right">
          <template #default="{ $index, row }">
            <el-popconfirm
              class="group-item" :title="t('roleManage.assign.deletePop2')"
              @confirm="handleDelete($index, row)"
            >
              <template #reference>
                <ElLink :underline="false" type="danger">
                  {{ t('roleManage.delete') }}
                </ElLink>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty :image-size="62" />
        </template>
      </ElTable>

      <div :class="style['pagination-box']">
        <el-pagination
          v-model:current-page="pagination.current" v-model:page-size="pagination.size"
          class="curd-page-pagination" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
:global(.el-dialog.role-assign-users-dialog) {
  width: 1184px;
}
:global(.el-dialog.role-assign-users-dialog) {
  height: 680px;
}
:global(.assign-users-dialog-body) {
  height: calc(100% - 46px);
}

// 1600px - 1920px 区间使用中等尺寸样式
@include screen-1600-to-1920 {
  :global(.el-dialog.role-assign-users-dialog) {
    width: 992px;
    height: 560px !important;
  }
}

// 小于 1600px 使用小尺寸样式
@include screen-below-1600 {
  :global(.el-dialog.role-assign-users-dialog) {
    width: 840px;
    height: 560px !important;
  }
}
</style>
